<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>太极图</title>
    <style>
      #taiji {
        /* animation: 3s linear 1s infinite running taiji; */
      }

      @keyframes taiji {
        0% {
          transform: rotate(0);
        }
        50% {
          transform: rotate(180deg);
        }
        100% {
          transform: rotate(360deg);
        }
      }
    </style>
  </head>
  <body>
    <canvas id="taiji"></canvas>

    <script>
      const canvas = document.getElementById('taiji')
      let ctx
      if (canvas.getContext) {
        ctx = canvas.getContext('2d')
        // 右圆弧
        ctx.beginPath()
        // 移动画点(设置起始位置)
        // 绘制外圆
        ctx.arc(100, 100, 40, Math.PI / 2, (Math.PI / 2) * 3, true)
        ctx.stroke()
        ctx.fill()

        // 左圆弧
        ctx.beginPath()
        ctx.arc(100, 100, 40, Math.PI / 2, (Math.PI / 2) * 3)
        ctx.fillStyle = '#fff'
        ctx.stroke()
        ctx.fill()

        // 上圆弧
        ctx.beginPath()
        ctx.moveTo(100, 100)
        ctx.arc(100, 80, 20, Math.PI / 2, (Math.PI / 2) * 3, true)
        ctx.fill()

        // 下圆弧
        ctx.beginPath()
        ctx.moveTo(100, 140)
        ctx.arc(100, 120, 20, Math.PI / 2, (Math.PI / 2) * 3)
        ctx.fillStyle = '#000'
        ctx.fill()

        // 两个圆点
        ctx.beginPath()
        // 上圆点
        ctx.moveTo(105, 80)
        ctx.arc(100, 80, 5, 0, 2 * Math.PI, true)
        ctx.fill()
        // 下圆点
        ctx.beginPath()
        ctx.moveTo(105, 120)
        ctx.arc(100, 120, 5, 0, 2 * Math.PI, true)
        // ctx.stroke()
        ctx.fillStyle = '#fff'
        ctx.fill()
      }
      // drawTaiji('#taiji', 40)
/**
 * @Description:
 * @param {type}
 * @return
 * @author GCZ
 */
      function drawTaiji(selector, radius) {
        let canvas
        // 元素或选择器校验
        if (selector instanceof HTMLCanvasElement) {
          canvas = selector
        } else if (typeof selector === 'string') {
          canvas = document.querySelector(selector)
        } else {
          throw new Error('请传入正确的选择器或canvas元素')
        }
        const lineWidth = 2

        // 设置宽高
        canvas.width = radius * 2 + 2 * lineWidth
        canvas.height = radius * 2 + 2 * lineWidth

        // 中心位置
        let center = radius + lineWidth

        // 创建渲染上下文

        if (canvas.getContext) {
          ctx = canvas.getContext('2d')
          // 右圆弧
          ctx.beginPath()
          // 绘制外圆
          ctx.arc(center, center, radius, Math.PI / 2, (Math.PI / 2) * 3, true)
          ctx.lineWidth = lineWidth

          ctx.stroke()

          ctx.fill()

          // 左圆弧
          ctx.beginPath()
          ctx.arc(center, center, radius, Math.PI / 2, (Math.PI / 2) * 3)
          ctx.fillStyle = '#fff'
          ctx.lineWidth = lineWidth
          ctx.stroke()
          ctx.fill()
          // 上圆弧
          ctx.beginPath()
          ctx.moveTo(center, center)
          ctx.arc(center, center / 2 + lineWidth / 2, radius / 2, Math.PI / 2, (Math.PI / 2) * 3, true)
          ctx.fill()

          // // // 下圆弧
          ctx.beginPath()
          ctx.moveTo(center, 2 * center - lineWidth)
          ctx.arc(center, (3 / 2) * center - lineWidth / 2, radius / 2, Math.PI / 2, (Math.PI / 2) * 3)
          ctx.fillStyle = '#000'
          ctx.fill()

          // 两个圆点
          ctx.beginPath()
          // 上圆点
          ctx.moveTo(center + center / 8, center / 2 + lineWidth / 2)
          ctx.arc(center, center / 2 + lineWidth / 2, radius / 8, 0, 2 * Math.PI, true)
          ctx.fill()
          // // 下圆点
          ctx.beginPath()
          ctx.moveTo(center / 8, (3 / 2) * center - lineWidth / 2)
          ctx.arc(center, (3 / 2) * center - lineWidth / 2, radius / 8, 0, 2 * Math.PI, true)
          // ctx.stroke()
          ctx.fillStyle = '#fff'
          ctx.fill()
        } else {
          throw new Error('当前浏览器不支持canvas元素')
        }
      }
    </script>
  </body>
</html>
